<template>
	<div class="thePage flex-column">
		<div class="pg-title-dark">实习日记批阅</div>		
		<div class="serachKeywords flex-between">
			<cube-input class="flex-1" v-model="keywords" placeholder="输入要查询的姓名或学号"></cube-input>
			<i class="iconfont icon-sousuotianchong"></i>			
		</div>
		<div class="b-top-half "></div>
		<div class="list overflow-y">				
			<div class="item flex-column b-line-half" v-for="(item, i) in listData" :key="i">
				<div class="flex-between" @click = "onStudent">
					<img class="avatar" :src="item.avatar || defaultAvatar"></img>
							
					<div class="item-left flex-column flex-center ">
						<div>{{item.name}}</div>
						<div>{{item.number}}</div>
					</div>
					<div class="item-right flex-column flex-1">
						<div>总篇数：<span class="ired">{{item.total}}</span>篇</div>
						<div>未批阅：<span class="ired">{{item.noread}}</span>篇</div>								
					</div>
				</div>
			</div>	
		</div>
	</div>
</template>

<script>
export default {
	name: 'DiarySummaryList',
	data() {
		return {
			defaultAvatar:require("@/pics/default_avatar.png"),			
			keywords: '',			
			listData: [
				{
					name: '王某1',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某2',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某3',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某4',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某6',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某6',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
				{
					name: '王某6',
					number: '2018080101',
					avatar: '',					
					total: 14 , //总篇数
					noread: 10, //未批阅篇数
				},
			],			
		};
	},
		
	methods: {		
		onStudent() {
			this.$router.push({ name: 'diaryStudentList' });
		}
	}
};
</script>

<style lang="less" scoped>
.list {	
	margin: 0px 24px 24px 24px;	
}
.b-top-half{
	margin: 10px 20px;
}
.item{
	padding-top: 10px;
}

.item-left{
	padding: 0 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}
.item-right{	
	padding: 0 20px;
	font-size: 13px;
	text-align: right;
}
.ired{
	font-size: 14px;
	padding: 0 5px;
}
</style>
